
import { PageContainer } from "@ant-design/pro-components"
import { Card } from "antd"
import { Button, Col, Flex, Input, Row, Select, Space, Tag, Table, DatePicker, Tabs } from 'antd';
import { useState, useEffect } from "react"
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import type { DatePickerProps, GetProps, TabsProps } from 'antd';//列表的数据行
import { history } from "@umijs/max";
import { getGoodsList, searchGoodsList } from "@/services/goods/index"
// Define search conditions
interface SearchParams {
    id?: number | null;
    name?: string | null;
    status?: string | null;
    startTime?: string | null;
    endTime?: string | null;
    manger_id?: number | null;
}



const List = () => {
    const staticGoodsData = [
        {
            id: 1,
            name: '示例商品A',
            remaining_stock: 100,
            time_on: '2023-01-01',
            time_off: '2023-12-31',
            create_by: '管理员张三',
            product_state: '在售',
        },
        {
            id: 2,
            name: '示例商品B',
            remaining_stock: 200,
            time_on: '2023-02-01',
            time_off: '2023-12-31',
            create_by: '管理员李四',
            product_state: '在售',
        },
        // ... 可以继续添加更多静态商品数据 ...
    ];







    const [searchParams, setSearchParams] = useState<SearchParams>({
        id: null,
        name: null,
        status: null,
        startTime: null,
        endTime: null,
        manger_id: null,
    });

    const handleInputChange = (fieldName: keyof SearchParams) => (
        event: React.ChangeEvent<HTMLInputElement>
    ) => {
        setSearchParams({
            ...searchParams,
            [fieldName]: event.target.value,
        });
    };

    const [goodsList, setGoodsList] = useState<GOODSAPI.List[] | undefined>([]);
    const [params, setParams] = useState<GOODSAPI.goodsParams>({
        current_page: 1,
        size: 5,
    });
    const [total, setTotal] = useState<number | undefined>(0);


    useEffect(() => {

        // Fetch goods list when component mounts
        fetchGoodsList();
    }, []);

    const fetchGoodsList = async () => {
        //发请求获取数据
        const { data } = await getGoodsList(params);

        if (data) {
            //@ts-ignore
            setGoodsList(data.data.productByPage);
            //@ts-ignore
            setTotal(data.data.pcount);
        }

    };

    const onSearch = async (val: GOODSAPI.searchParams) => {
        const { data } = await searchGoodsList({
            ...params,
            [Object.keys(val)[0]]: val.search,
        });
        setGoodsList(data.list);
        setTotal(data.total);
    };



    // Define table columns
    const columns: ColumnsType<GOODSAPI.List> = [
        {
            title: "权益ID",
            dataIndex: "id",
            key: "id",
        },
        {
            title: "商品名称",
            dataIndex: "name",
            key: "name",
        },
        {
            title: "剩余库存",
            dataIndex: "remaining_stock",
            key: "remaining_stock",
        },
        {
            title: "上线时间",
            dataIndex: "time_on",
            key: "time_on",
        },
        {
            title: "下线时间",
            dataIndex: "time_on",
            key: "time_on",
        },
        {
            title: "管理人",
            dataIndex: "create_by",
            key: "create_by",
        },
        {
            title: "商品状态",
            dataIndex: "product_state",
            key: "product_state",
            render: (product_state) => {
                // Render the product state based on your requirements
                // For example, you can use a switch statement or if-else to return different text or tags
                return <Tag color="blue">{product_state}</Tag>;
            },
        },
    ];

    return (
        <PageContainer>
            <Card>
                <Flex gap="middle" wrap>
                    <div style={{ display: 'flex', alignItems: 'center', width: '240px' }}>
                        <span style={{ marginRight: '8px', width: '80px' }}>权益ID:</span>
                        <Input value={searchParams.id} onChange={handleInputChange("id")} />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', }}>
                        <span style={{ marginRight: '8px', width: 90, marginLeft: 16 }}>
                            商品名称:
                        </span>
                        <Input value={searchParams.name} onChange={handleInputChange("name")} />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span style={{ marginRight: 8, width: 90, marginLeft: 16 }}>
                            开始时间:
                        </span>

                        <DatePicker
                            value={searchParams.startTime}
                            onChange={(date, dateString) =>
                                setSearchParams({
                                    ...searchParams,
                                    startTime: dateString,
                                })
                            }
                        />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span style={{ marginRight: 8, width: 90, marginLeft: 16 }}>
                            结束时间:
                        </span>
                        <DatePicker
                            value={searchParams.endTime}
                            onChange={(date, dateString) =>
                                setSearchParams({
                                    ...searchParams,
                                    endTime: dateString,
                                })
                            }
                        />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', width: '240px' }}>
                        <span style={{ marginRight: 8, width: 90, }}>
                            商品状态:
                        </span>
                        <Input
                            value={searchParams.status}
                            onChange={handleInputChange("status")}
                        />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <span style={{ marginRight: 8, width: 90, marginLeft: 16 }}>
                            管理人:
                        </span>
                        <Input
                            value={searchParams.manger_id}
                            onChange={handleInputChange("manger_id")}
                        />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'end', width: '100%' }}>
                        <Button
                            type="primary"
                            style={{ marginLeft: 16 }}
                            onClick={() => onSearch(searchParams)}
                        >
                            重置
                        </Button>
                        <Button
                            type="primary"
                            style={{ marginLeft: 16 }}
                            onClick={() => onSearch(searchParams)}
                        >
                            查询
                        </Button>

                    </div>
                </Flex>
            </Card>
            <Card style={{ marginTop: 20 }}>

                <Flex gap="small" wrap style={{ marginBottom: 16, display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
                    <Button
                        type="primary"
                        style={{ marginLeft: 16, justifyContent: 'end', }}
                        onClick={() => {

                        }}
                        //onClick={() => onSearch(searchParams)}
                        onClick={() => {
                            window.location.href = '/add';
                        }}
                    >
                        新建商品
                    </Button>
                </Flex>
                <Table

                    rowKey="_id"
                    columns={columns}
                    dataSource={staticGoodsData}
                    pagination={{
                        total: total,
                        onChange: (page) => {
                            setParams({
                                ...params,
                                pageNum: page,
                            });
                            //像后端请求数据，更新goodsList和total
                        },
                        pageSize: 5,

                    }}
                    onRow={(record) => {
                        return {
                            onClick: () => {

                                history.push(`goods/details`);
                            },
                        };
                    }}
                />
            </Card>
        </PageContainer>
    );



};

export default List;